<template>
	<view>
		<view class="login-tooltip">欢迎来使用 佰年鸿系统</view>
		<view class="login-menu">
			<view class="layout">
				<view class="login-menu-item login-menu-active">密码</view>
				<view class="login-menu-item" @click="handleLoginMobileButton()">验证码</view>
			</view>
		</view>
		<view class="login-group">
			<view><input placeholder="账户" type="text" v-model="loginForm.username" /></view>
		</view>
		<view class="login-group">
			<view><input placeholder="密码" type="passsword" v-model="loginForm.password" /></view>
		</view>
		<view class="login-protocol">
			<view class="layout">		
				<view class="login-protocol-radio">
					<checkbox value="1"></checkbox>
				</view>
				<view class="login-protocol-text">
					我已阅读<text>用户手册</text>和<text>隐私政策</text>
				</view>
			</view>
		</view>
		<view class="login-button-submit" @click="handleLoginSubmit()">立即登录</view>
		
		<view class="thridy-login-tooltip">社交账号登录</view>
		<view class="thridy-login">
			<view class="layout">
				<view class="thridy-login-item" @click="handleLoginThridyButton('sinaweibo')">
					<image src="/static/icon/icon-login-weibo.png"></image>
				</view>
				<view class="thridy-login-item" @click="handleLoginThridyButton('qq')">
					<image src="/static/icon/icon-login-tencent.png"></image>
				</view>
				<view class="thridy-login-item" @click="handleLoginThridyButton('weixin')">
					<image src="/static/icon/icon-login-wechat.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginForm:{
					channelName:"",
					username:"",
					password:""
				}
			}
		},
		onLoad(options) {
			if(options.hasOwnProperty('agentID')){
				this.loginForm.agentID = options.agentID				
			}
			if(options.hasOwnProperty('channelID')){
				this.loginForm.channelID = options.channelID				
			}
			if(options.hasOwnProperty('invitationCode')){
				this.loginForm.invitationCode = options.invitationCode				
			}
		},
		onShow() {
			let accessToken = this.$auth.getToken()
			if(accessToken){
				uni.switchTab({
					url:"/pages/home/home/home"
				})
			}
		},
		methods: {
			handleLoginMobileButton:function(){
				uni.redirectTo({
					url:"/pages/authentication/mobile/mobile"
				})
			},
			handleLoginSubmit:function(){
				let _this = this
				this.$authentication.login(this.loginForm).then(res=>{
						
					if(res.code == 200){
						_this.$auth.setToken(res.data.accessToken)
						uni.switchTab({
							url:"/pages/index/index"
						})
					}else{
						uni.showToast({
							icon:"none",
							title:res.message
						})
					}
					console.log(res)
				})
			},
			handleLoginThridyButton:function(loginType){
				uni.login({
					provider:loginType,
					success(res) {
						
					},
					fail(res) {
						
					},
					complete(res) {
						
					}
				})
			}
		}
	}
</script>

<style>
page { background: #ededed; }

.login-tooltip { font-size: 38px; font-weight: bold; padding: 100rpx 25rpx; }

.login-menu {}
.login-menu-item { padding: 15rpx 25rpx; font-size: 18px; font-weight: 800; color: #999; }
.login-menu-active { color: #000; }

.login-group { padding: 25rpx; background: #fff; margin-bottom: 50rpx; }

.login-protocol { padding: 10rpx 25rpx;}
.login-protocol text { padding: 0 15rpx; color: #f30; }
.login-protocol-text { width: 490rpx; font-size: 14px; }
.login-protocol-failed { width: 180rpx; font-size: 14px; }

.login-button-submit { background: #f30; width: 700rpx; margin: 0 auto; padding: 25rpx 0; text-align: center; }	
.login-button-submit { border-radius: 20rpx; color: #fff; font-size: 24px; margin-top: 150rpx; }
.thridy-login { width: 360rpx; margin: 0 auto;}
.thridy-login-tooltip { text-align: center; padding: 50rpx 0; margin-top: 200rpx; }
.thridy-login-item { width: 80rpx; margin: 0 20rpx; height: 80rpx; }
</style>
